<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻网站</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="keywords" content="凤凰,凤凰网,凤凰新媒体,凤凰卫视,凤凰卫视中文台,资讯台,电影台,欧洲台,美洲台,凤凰周刊,phoenix,phoenixtv">
    <meta name="description" content="凤凰网是中国领先的综合门户网站，提供含文图音视频的全方位综合新闻资讯、深度访谈、观点评论、财经产品、互动应用、分享社区等服务，同时与凤凰无线、凤凰宽频形成三屏联动，为全球主流华人提供互联网、无线通信、电视网三网融合无缝衔接的新媒体优质体验。">
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/H5index.css">
</head>
<body>
<!--header begin-->
<header>
<h1><a class="i-logo" href="#">
    <img src="images/logo.png" alt="">
</a></h1>
</header>
<!--header end-->
<!--nav begin-->
<nav>
    <a class="i-link cur" href="#">头条</a>
    <a class="i-link" href="#">视频</a>
    <a class="i-link" href="#">财经</a>
    <a class="i-link" href="#">凤凰号</a>
    <a class="i-link" href="#">凤凰卫视</a>
</nav>
<!--nav end-->
<!--focus begin-->
<div class="focus">
    <div class="swiper-container">
        <!--图片-->
        <div class="swiper-wrapper">

        </div>
        <!--分页器-->
        <div class="swiper-pagination"></div>
    </div>
</div>
<!--focus end-->
<!--main begin-->
<section class="main">
    <!--左图右文-->
    <!--<section class="item">

        <div class="i-pic">
            <a href="#">
                <img src="images/img01.png" alt="">
            </a>
        </div>

        <div class="i-thumb">
            <div class="i-title"><a href="#">这三年，习近平治国理政这三年，习近平治国理政这三年，习近平治国理政</a></div>
            <div class="i-des">
                <div class="i-time">1分钟前</div>
                <div class="i-num">
                    <span class="i-count">1.4万</span>
                    <span class="i-icon"></span>
                    <span class="i-label">专题</span>
                </div>
            </div>
        </div>
    </section>-->
    <!--三小图-->
    <!--<section class="itemPics">-->
        <!--<div class="i-title">-->
            <!--<a href="#">这三年，习近平治国理政这三年，习近平治国理政这三年，习近平治国理政</a>-->
        <!--</div>-->
        <!--<div class="pics">-->
            <!--<a href="#">-->
                <!--<img src="images/little01.png" alt="">-->
                <!--<img src="images/little02.png" alt="">-->
                <!--<img src="images/little03.png" alt="">-->
            <!--</a>-->
        <!--</div>-->

        <!--<div class="i-des">-->
            <!--<div class="i-info">-->
                <!--<div class="i-source">参考消息网</div>-->
                <!--<div class="i-time">1分钟前</div>-->
            <!--</div>-->
            <!--<div class="i-num">-->
                <!--<span class="i-count">1.4万</span>-->
                <!--<span class="i-icon"></span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</section>-->
    <!--纯文字-->
    <!--<section class="itemPics itemTxt">-->
        <!--<div class="i-title">-->
            <!--<a href="#">这三年，习近平治国理政这三年，习近平治国理政这三年，习近平治国理政</a>-->
        <!--</div>-->

        <!--<div class="i-des">-->
            <!--<div class="i-info">-->
                <!--<div class="i-source">参考消息网</div>-->
                <!--<div class="i-time">1分钟前</div>-->
            <!--</div>-->
            <!--<div class="i-num">-->
                <!--<span class="i-count">1.4万</span>-->
                <!--<span class="i-icon"></span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</section>-->
    <!--大图-->
    <!--<section class="itemPics">-->
        <!--<div class="i-title">-->
            <!--<a href="#">这三年，习近平治国理政这三年，习近平治国理政这三年，习近平治国理政</a>-->
        <!--</div>-->
        <!--<div class="bigPic">-->
            <!--<a href="#">-->
                <!--<img src="images/pic.jpg" alt="">-->
                <!--<span class="play-bg"></span>-->
                <!--<span class="play-icon"></span>-->
                <!--<span class="play-time">00:02</span>-->
            <!--</a>-->
        <!--</div>-->

        <!--<div class="i-des">-->
            <!--<div class="i-info">-->
                <!--<div class="i-source">参考消息网</div>-->
                <!--<div class="i-time">1分钟前</div>-->
            <!--</div>-->
            <!--<div class="i-num">-->
                <!--<span class="i-count">1.4万</span>-->
                <!--<span class="i-icon"></span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</section>-->
</section>
<!--main end-->



<script charset="utf-8" src="js/ejs.min.js" ></script>
<script src="js/zepto.min.js"></script>
<script charset="utf-8" type="text/template" id="focusTemplate">
    <% $.each(focusData,function(index,item){%>
    <div class="swiper-slide">
        <a href="<%= item.link.weburl%>">
            <img src="<%= item.thumbnail%>" alt="">
            <span class="txt"><%= item.title%></span>
            <span class="bg"></span>
        </a>
    </div>
    <%})%>
</script>
<script charset="utf-8" type="text/template" id="itemTemplate">
    <%$.each(itemTepData,function(index,item){%>

    <%if(item.style.images){%>
    <section class="itemPics">
        <div class="i-title">
            <a href="<%=item.link.weburl%>"><%=item.title%></a>
        </div>
        <div class="pics">
            <a href="<%=item.link.weburl%>">
                <img src="<%=item.style.images[0]%>" alt="">
                <img src="<%=item.style.images[1]%>" alt="">
                <img src="<%=item.style.images[2]%>" alt="">
            </a>
        </div>

        <div class="i-des">
            <div class="i-info">
                <div class="i-source"><%=item.source%></div>
                <div class="i-time"><%=item.updateTime%></div>
            </div>
            <div class="i-num">
                <span class="i-count"><%=item.commentsall%></span>
                <span class="i-icon"></span>
            </div>
        </div>
    </section>
    <%}else if(item.type=='phvideo'){%>

    <section class="itemPics">
        <div class="i-title">
            <a href="<%=item.link.weburl%>"><%=item.title%></a>
        </div>
        <div class="bigPic">
            <a href="<%=item.link.weburl%>">
                <img src="<%=item.thumbnail%>" alt="">
                <span class="play-bg"></span>
                <span class="play-icon"></span>
                <span class="play-time"></span>
            </a>
        </div>

        <div class="i-des">
            <div class="i-info">
                <div class="i-source"><%=item.source%></div>
                <div class="i-time"></div>
            </div>
            <div class="i-num">
                <span class="i-count"><%=item.commentsall%></span>
                <span class="i-icon"></span>
            </div>
        </div>
    </section>
    <%}else if(item.thumbnail){%>

    <section class="item">

        <div class="i-pic">
            <a href="<%=item.link.weburl%>">
                <img src="<%=item.thumbnail%>" alt="">
            </a>
        </div>

        <div class="i-thumb">
            <div class="i-title"><a href="<%=item.link.weburl%>"><%=item.title%></a></div>
            <div class="i-des">
                <div class="i-time"><%=item.updateTime%></div>
                <div class="i-num">
                    <span class="i-count"><%=item.commentsall%></span>
                    <span class="i-icon"></span>
                    <%if(item.style.attribute){%>
                    <span class="i-label">专题</span>
                    <%}%>
                </div>
            </div>
        </div>
    </section>
    <%}else{%>
    <section class="itemPics itemTxt">
        <div class="i-title">
            <a href="#">这三年，习近平治国理政这三年，习近平治国理政这三年，习近平治国理政</a>
        </div>

        <div class="i-des">
            <div class="i-info">
                <div class="i-source">参考消息网</div>
                <div class="i-time">1分钟前</div>
            </div>
            <div class="i-num">
                <span class="i-count">1.4万</span>
                <span class="i-icon"></span>
            </div>
        </div>
    </section>
    <%}%>

    <%})%>

</script>
<script src="js/swiper.min.js"></script>

<script>
    ;(function (desW) {
        var winW=document.documentElement.clientWidth,
                ratio=winW/desW;
        document.documentElement.style.fontSize=ratio*100+'px';
    })(750);

    //swiper


    //通过ajax获取data数据
    function bindHtml(data) {
        for(var i=0;i<data.length;i++){
            if(data[i].type=='focus'){
                var focusList=data[i].item;
            }else{
                var itemList=data[i].item;
            }
        }
        console.log(data);

        var focusHtml=$('#focusTemplate').html();
        var result=ejs.render(focusHtml,{focusData:focusList});
        $('.swiper-wrapper').html(result);
        //$('.swiper-wrapper').html(ejs.render($('#focusTemplate').html(),{focusData:focusList}));
        var mySwiper=new Swiper('.swiper-container',{
            loop:true,
            pagination:'.swiper-pagination',//分页器
            paginationType:'fraction',//分页器的类型
        });

        //main
        /*var itemHtml=$('#itemTemplate').html();
        var rest=ejs.render(itemHtml,{itemTepData:itemList});
        $('.main').html(rest);*/
        $('.main').html(ejs.render($('#itemTemplate').html(),{
            itemTepData:itemList
        }));

    }


    $.ajax({
        url:'http://api.iclient.ifeng.com/ClientNews?id=SYLB10,SYDT10&gv=5.4.0&os=ios&uid=8jWzrXDWQeep2Nw4AZYzmHxkbneHy4Fj&callback=jQuery191037427085312083364_1483258003039&_=1483258003040',
        type:'get',
        dataType:'jsonp',
        jsonp:'callback',
        success:bindHtml
    })

</script>
</body>
</html>